<template>
    <div class="container">
        <el-form
            label-width="100px"
            :model="form"
            style="max-width: 460px"
            label-position="left"
            ref="myform"
            class="formbox"
            :rules="rules"
        >
                <el-form-item 
                    label="用户名"
                    prop="username"
                    >
                    <el-input v-model="form.username" clearable :prefix-icon="User"/>
                </el-form-item>
            <el-form-item 
                label="密码"
                prop="password"
                >
                <el-input v-model="form.password" clearable show-password :prefix-icon="Lock" />
            </el-form-item>
            <div class="lastitem">
                <div class="alinks">
                    <router-link :to="{name:'register'}">没有账号，去注册</router-link>
                    <router-link :to="{name:'forget'}">忘记密码？</router-link>
                </div>
            </div>
            <div class="lastitem">
                <div class="alinks">
                    <el-button block type="success" @click="submitForm" class="btnblock">登录</el-button>
                    <el-button block type="warning" @click="resetForm" class="btnblock">重置</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>
<script>
import {reactive ,toRefs,onMounted, getCurrentInstance,ref} from 'vue' ; 
import {reg} from '@/utils/reg' ; 
import {ElMessage} from 'element-plus' ;
import {ajax} from '@/api/index' ; 
import {useRouter} from 'vue-router' ; 
import {UserFilled,Lock,User} from '@element-plus/icons-vue' ; 
export default {
    setup(props){
        const state = reactive({
            form:{},
            reg,
            UserFilled,
            Lock,
            User,
            rules:{
                username:[
                    {required:true,message:'请填写用户名'}
                ],
                password:[
                    {required:true,message:'请填写密码'},
                    {pattern:reg.pwd,message:'密码不符合规范'}
                ]
            }
        });

        const myform = ref();

        const router = useRouter() ; 

        const {proxy} = getCurrentInstance();

        const resetForm = ()=>{
            myform.value.resetFields();
        } ; 

        const submitForm = ()=>{
            myform.value.validate( async (valid)=>{
                if( valid ){
                    console.log(state.form);
                    let {code,data,token} = await ajax.login(state.form);
                    // console.log(code,data,token);
                    if( code == 200 ){
                        // 存储token
                        sessionStorage.setItem("token",token);
                        router.push({name:'main'});
                        localStorage.setItem('username',state.form.username);
                    }
                } else {
                    ElMessage.error('请输入规范的登录信息');
                }
            })
            
        } ;     

        onMounted(()=>{
            console.log(proxy.$root.$route);
            const {username} = proxy.$root.$route.query ; 
            if(username){
                state.form = {...state.form,username:username}
            } else {
                state.form = {...state.form,username:localStorage.getItem('username')}
            }
        });

        return {
            ...toRefs(state),
            submitForm,
            resetForm,
            myform
        };
    }
}
</script>
<style lang="scss" scoped>
.container{
    box-sizing: border-box;
    padding: 15px 40px 0px;
    .formbox{
        height: 100%;
        ::v-deep .el-form-item__label{
            color: rgba(255,255,255,0.7);
        }
        ::v-deep .el-input__inner{
            outline:1px;
            background-color: transparent;
        }
        .lastitem .alinks{
            margin-top: 25px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            a{
                font-size: 14px;
                color: rgb(36, 182, 170);
            }
            .el-button{
                width: 48%;
                height: 35px;
            }
        }
    }
}

</style>